import React from 'react';
import { Row, Col, Form, Select, DatePicker, Input, Tabs, Button, Icon, Upload } from 'antd';
const R = require('ramda');
import BizParams from '../../../components/commons/BizParams'
import CurrencySelect from '../../../components/commons/CurrencySelect'
import AddLinkman from '../components/AddLinkman';
import AddAddress from '../components/AddAddress';
import SingleDragger from '../../../components/commons/SingleDragger'
import moment from 'moment';
moment.locale('zh-cn');
const dateFormatter = "YYYY-MM-DD";

const Dragger = Upload.Dragger;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const Option = Select.Option;
export default Form.create({ wrappedComponentRef: true })(class DocumentaryInfo extends React.Component {
	constructor(props) {
		super(props);
		this.initData(props.dataSource, true);
	}

	initData = (dataSource, flag) => {
		dataSource = R.isNil(dataSource) ? {} : dataSource;
		let defaultLinkmanId = R.isEmpty(dataSource) ? "" : dataSource.linkmanid;
		let defaultAddressId = R.isEmpty(dataSource) ? "" : dataSource.addressid;
		let linkmanList = R.isNil(this.props.linkmanList) ? [] : this.props.linkmanList;
		let addressList = R.isNil(this.props.addressList) ? [] : this.props.addressList;
		if (flag) {
			this.state = {
				linkmanList: linkmanList,
				addressList: addressList,
				linkmanId: defaultLinkmanId,
				addressId: defaultAddressId,
				defaultLinkmanId: defaultLinkmanId,
				defaultAddressId: defaultAddressId
			}
		} else {
			this.setState({
				linkmanList: linkmanList,
				addressList: addressList,
				linkmanId: defaultLinkmanId,
				addressId: defaultAddressId,
				defaultLinkmanId: defaultLinkmanId,
				defaultAddressId: defaultAddressId
			})
		}
	}

	handleResetFields = () => {
		this.setState({ linkmanId: this.state.defaultLinkmanId, addressId: this.state.defaultAddressId });
		if (this.refs.orderSoUpload) this.refs.orderSoUpload.resetUpload();//this.state.orderso;
		if (this.refs.highboxpageUpload) this.refs.highboxpageUpload.resetUpload();
		if (this.refs.dividboxinfoUpload) this.refs.dividboxinfoUpload.resetUpload();
		if (this.refs.sendreceiptpageUpload) this.refs.sendreceiptpageUpload.resetUpload();
		if (this.refs.inputboxpageUpload) this.refs.inputboxpageUpload.resetUpload();
		if (this.refs.otherpageUpload) this.refs.otherpageUpload.resetUpload();
		this.props.form.resetFields();
	}

	componentWillReceiveProps(nextProps) {
		if (!R.equals(this.props.dataSource)(nextProps.dataSource)) {
			this.initData(nextProps.dataSource);
		}
		//新增联系人是异步的 当新增完毕的时候props会改变 意味着已经拿到了新增的id，list的长度就会发生变化，就要刷新页面
		let dataSource = R.isNil(nextProps.dataSource) ? {} : nextProps.dataSource;
		if (this.props.linkmanList.length !== nextProps.linkmanList.length) {
			let linkmanId = R.isEmpty(dataSource) ? "" : dataSource.linkmanid;
			let linkmanList = R.isNil(nextProps.linkmanList) ? [] : nextProps.linkmanList;
			this.setState({
				linkmanList: linkmanList,
				linkmanId: linkmanId,
				defaultLinkmanId: this.state.defaultLinkmanId
			})
		}
		if (this.props.addressList.length !== nextProps.addressList.length) { //新增地址同理
			let addressId = R.isEmpty(dataSource) ? "" : dataSource.addressid;
			let addressList = R.isNil(nextProps.addressList) ? [] : nextProps.addressList;
			this.setState({
				addressList: addressList,
				addressId: addressId,
				defaultAddressId: this.state.defaultAddressId
			})
		}
	}

	form = {};

	handleCollectForm = () => {
		this.form.orderso = this.refs.orderSoUpload.getUrl();//this.state.orderso;
		this.form.highboxpage = this.refs.highboxpageUpload.getUrl();
		this.form.dividboxinfo = this.refs.dividboxinfoUpload.getUrl();
		this.form.sendreceiptpage = this.refs.sendreceiptpageUpload.getUrl();
		this.form.inputboxpage = this.refs.inputboxpageUpload.getUrl();
		this.form.otherpage = this.refs.otherpageUpload.getUrl();
		return this.form;
	}


	handleSaveAttachment = () => {
		let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
		let type = (this.props.type === "1" ? 'orderManage' : 'declareApproval') + '/updateOrder';
		let form = {
			orderso: this.refs.orderSoUpload.getUrl(), highboxpage: this.refs.highboxpageUpload.getUrl(), dividboxinfo: this.refs.dividboxinfoUpload.getUrl(),
			sendreceiptpage: this.refs.sendreceiptpageUpload.getUrl(), inputboxpage: this.refs.inputboxpageUpload.getUrl(), otherpage: this.refs.otherpageUpload.getUrl()
		};
		form = Object.assign({}, dataSource, form);
		this.props.dispatch({
			type: type,
			payload: {
				dataSource: form,
				searchConditions: this.props.searchConditions,
				onSuccess: () => {
					this.props.handleCancel(["4"]);
				}
			}
		});

	}

	checkDocumentaryInfo = () => {
		let flag = true;
		this.props.form.validateFields((errors, values) => {
			if (errors) {
				flag = false;
			} else {
				this.form = values;
				this.form.exportdeclarationdate = R.isNil(this.form.exportdeclarationdate) ? this.form.exportdeclarationdate : this.form.exportdeclarationdate.format(dateFormatter);
				this.form.packagedate = R.isNil(this.form.packagedate) ? this.form.packagedate : this.form.packagedate.format(dateFormatter);
			}
		})
		return flag;
	};

	handleChangeLinkman = (value) => {
		this.setState({ linkmanId: value })
	}

	handleChangeAddress = (value) => {
		this.setState({ addressId: value })
	}

	handleOpenAddLinkman = () => {
		this.addLInkman.handleOpen();
	}

	handleOpenAddAddress = () => {
		this.addAddress.handleOpen();
	}

	render() {
		let otherFieldValues = this.props.form.getFieldsValue();
		const { getFieldDecorator } = this.props.form;
		let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
		let formItemLayout = {
			labelCol: { xs: { span: 24 }, sm: { span: 6 } },
			wrapperCol: { xs: { span: 24 }, sm: { span: 14 } }
		};
		let linkman = R.find(R.propEq('id', parseInt(this.state.linkmanId)))(this.state.linkmanList);
		let address = R.find(R.propEq('id', parseInt(this.state.addressId)))(this.state.addressList);
		let linkmanList = this.props.disabled ? this.state.linkmanList : R.filter(buyer => buyer.status === "1", this.state.linkmanList);
		let addressList = this.props.disabled ? this.state.addressList : R.filter(buyer => buyer.status === "1", this.state.addressList);
		return (
			<div>
				<Form>
					<Row>
						<Col span={12}>
							<FormItem {...formItemLayout} label="报关日期" hasFeedback>
								{getFieldDecorator('exportdeclarationdate', {
									// rules: [{
									// 	required: true, message: '请选择期望报关日期'
									// }],
									initialValue: (R.isNil(dataSource.exportdeclarationdate) || R.isEmpty(dataSource.exportdeclarationdate)) ? undefined : moment(dataSource.exportdeclarationdate, dateFormatter)
								})(
									<DatePicker disabled={this.props.disabled} style={{ width: '100%' }} />
									)}
							</FormItem>
						</Col>
					</Row>
					<Tabs tabPosition={'top'} tabBarExtraContent={
						<Button disabled={this.props.disabled} style={{ border: 0 }} onClick={this.handleOpenAddLinkman}><Icon type="plus-circle-o" />添加联系人</Button>
					}>
						<TabPane tab="联系人" key="1">
							<Row>
								<Col span={12}>
									<FormItem {...formItemLayout} label="联系人" hasFeedback>
										{getFieldDecorator('linkmanid', {
											// rules: [{
											// 	required: true, message: '请选择联系人'
											// }],
											initialValue: R.isNil(this.state.linkmanId) ? "" : this.state.linkmanId + ""
										})(
											<Select disabled={this.props.disabled} style={{ width: '100%' }} onChange={this.handleChangeLinkman.bind(this)}>
												{
													!R.isNil(linkmanList) ? linkmanList.map(item => {
														return (<Option value={item.id + ""} key={item.id + ""}>{item.name}</Option>);
													}) : ''
												}
											</Select>
											)}
									</FormItem>
								</Col>
							</Row>
							<Row>
								<Col span={12}>
									<FormItem {...formItemLayout} label="姓名" hasFeedback>
										{R.isNil(linkman) ? "" : linkman.name}
									</FormItem>
								</Col>
								<Col span={12}>
									<FormItem {...formItemLayout} label="邮箱" hasFeedback>
										{R.isNil(linkman) ? "" : linkman.email}
									</FormItem>
								</Col>
							</Row>
							<Row>
								<Col span={12}>
									<FormItem {...formItemLayout} label="手机">
										{R.isNil(linkman) ? "" : linkman.mobile}
									</FormItem>
								</Col>
								<Col span={12}>
									<FormItem {...formItemLayout} label="电话">
										{R.isNil(linkman) ? "" : linkman.telephone}
									</FormItem>
								</Col>
							</Row>
						</TabPane>
					</Tabs>
					<Tabs tabPosition={'top'} tabBarExtraContent={
						<Button disabled={this.props.disabled} style={{ border: 0 }} onClick={this.handleOpenAddAddress}><Icon type="plus-circle-o" />添加货物存放地址</Button>
					}>
						<TabPane tab="货物信息" key="1">
							<Row>
								<Col span={12}>
									<FormItem {...formItemLayout} label="存放地址" hasFeedback>
										{getFieldDecorator('addressid', {
											// rules: [{
											// 	required: true, message: '请选择货物存放地址'
											// }],
											initialValue: R.isNil(this.state.addressId) ? "" : this.state.addressId + ""
										})(
											<Select disabled={this.props.disabled} style={{ width: '100%' }} onChange={this.handleChangeAddress.bind(this)}>
												{
													!R.isNil(addressList) ? addressList.map(item => {
														return (<Option value={item.id + ""} key={item.id + ""}>{item.address}</Option>);
													}) : ''
												}
											</Select>
											)}
									</FormItem>
								</Col>
								<Col span={12}>
									<FormItem {...formItemLayout} label="装车时间" hasFeedback>
										{getFieldDecorator('packagedate', {
											// rules: [{
											// 	required: true, message: '请选择装车时间'
											// }],
											initialValue: (R.isNil(dataSource.packagedate) || R.isEmpty(dataSource.packagedate)) ? undefined : moment(dataSource.packagedate, dateFormatter)
										})(
											<DatePicker disabled={this.props.disabled} />
											)}
									</FormItem>
								</Col>
							</Row>
							<Row>
								<Col span={12}>
									<FormItem {...formItemLayout} label="联系人" hasFeedback>
										{R.isNil(address) ? "" : address.name}
									</FormItem>
								</Col>
								<Col span={12}>
									<FormItem {...formItemLayout} label="详细地址" hasFeedback>
										{R.isNil(address) ? "" : address.address}
									</FormItem>
								</Col>
							</Row>
							<Row>
								<Col span={12}>
									<FormItem {...formItemLayout} label="手机">
										{R.isNil(address) ? "" : address.mobile}
									</FormItem>
								</Col>
								<Col span={12}>
									<FormItem {...formItemLayout} label="电话">
										{R.isNil(address) ? "" : address.telephone}
									</FormItem>
								</Col>
							</Row>
							<Row>
								<Col span={12}>
									<FormItem {...formItemLayout} label="出货备注" hasFeedback>
										{getFieldDecorator('shipnote', {
											initialValue: dataSource.shipnote
										})(
											<Input.TextArea disabled={this.props.disabled} maxLength="200" autosize={true} />
											)}
									</FormItem>
								</Col>
							</Row>
						</TabPane>
					</Tabs>
					<Tabs tabPosition={'top'}>
						<TabPane tab="附件" key="1">
							<Row>
								<Col span={12}>
									<FormItem {...formItemLayout} label="SO(Shipping Order)" hasFeedback>
										<SingleDragger url={dataSource.orderso} ref="orderSoUpload" dataSource={dataSource} disabled={this.props.attachmentDisabled} />
									</FormItem>
								</Col>
								<Col span={12}>
									<FormItem {...formItemLayout} label="重柜纸" hasFeedback>
										<SingleDragger url={dataSource.highboxpage} ref="highboxpageUpload" dataSource={dataSource} disabled={this.props.attachmentDisabled} />
									</FormItem>
								</Col>
							</Row>
							<Row>
								<Col span={12}>
									<FormItem {...formItemLayout} label="分柜明细" hasFeedback>
										<SingleDragger url={dataSource.dividboxinfo} ref="dividboxinfoUpload" dataSource={dataSource} disabled={this.props.attachmentDisabled} />
									</FormItem>
								</Col>
								<Col span={12}>
									<FormItem {...formItemLayout} label="提单复印件" hasFeedback>
										<SingleDragger url={dataSource.sendreceiptpage} ref="sendreceiptpageUpload" dataSource={dataSource} disabled={this.props.attachmentDisabled} />
									</FormItem>
								</Col>
							</Row>
							<Row>
								<Col span={12}>
									<FormItem {...formItemLayout} label="装货单" hasFeedback>
										<SingleDragger url={dataSource.inputboxpage} ref="inputboxpageUpload" dataSource={dataSource} disabled={this.props.attachmentDisabled} />
									</FormItem>
								</Col>
								<Col span={12}>
									<FormItem {...formItemLayout} label="其他" hasFeedback>
										<SingleDragger url={dataSource.otherpage} ref="otherpageUpload" dataSource={dataSource} disabled={this.props.attachmentDisabled} />
									</FormItem>
								</Col>
							</Row>
						</TabPane>
					</Tabs>
				</Form>
				<Button style={{ float: 'right', display: !this.props.attachmentDisabled && !R.isNil(dataSource.id) && !R.contains(dataSource.status)(["1", "3"]) ? 'inline-block' : 'none' }} onClick={this.handleSaveAttachment.bind(this)} disabled={this.props.attachmentDisabled} type="primary" key="submit" size="large" icon="check">保存附件</Button>
				<AddLinkman wrappedComponentRef={(inst) => this.addLInkman = inst} dispatch={this.props.dispatch} cstId={this.props.cstId} />
				<AddAddress wrappedComponentRef={(inst) => this.addAddress = inst} dispatch={this.props.dispatch} cstId={this.props.cstId} />
			</div>
		)
	}
})